Pie Chart এবং Doughnut Chart দুটি জনপ্রিয় চার্ট টাইপ যা Chart.js ব্যবহার করে সহজেই তৈরি করা যায়। এই চার্ট দুটি মূলত একটি সেগমেন্ট হিসেবে ডেটার অংশবিশেষ প্রদর্শন করে, তবে Doughnut Chart-এ কেন্দ্রের একটি খালি জায়গা থাকে।
Pie Chart (পাই চার্ট)
Pie Chart সাধারণত একটি টোটাল বা সম্পূর্ণ ডেটার ভাগভাগি দেখানোর জন্য ব্যবহৃত হয়। এটি একটি বৃত্তাকার চার্ট যেখানে প্রতিটি সেগমেন্ট একটি নির্দিষ্ট অংশ বা শতাংশের প্রতিনিধিত্ব করে।
ব্যবহার:
- বাজার শেয়ার।
- ভোটের ফলাফল।
- খরচের বিতরণ।
কোড উদাহরণ:
const ctx = document.getElementById('myPieChart').getContext('2d');
const myPieChart = new Chart(ctx, {
type: 'pie', // Pie Chart টাইপ নির্ধারণ
data: {
labels: ['Red', 'Blue', 'Yellow'], // সেগমেন্টের লেবেল
datasets: [{
data: [30, 50, 20], // সেগমেন্টের মান
backgroundColor: ['red', 'blue', 'yellow'], // সেগমেন্টের রঙ
borderColor: ['#ffffff', '#ffffff', '#ffffff'], // সেগমেন্টের বর্ডার রঙ
borderWidth: 2 // বর্ডারের প্রস্থ
}]
},
options: {
responsive: true, // রেসপন্সিভ ডিজাইন
plugins: {
legend: {
position: 'top' // লেজেন্ডের অবস্থান
},
tooltip: {
enabled: true // টুলটিপ চালু
}
}
}
});
প্রধান বৈশিষ্ট্য:
type: 'pie': পাই চার্টের ধরন।labels: এক্স-অক্ষের লেবেল যা প্রতিটি সেগমেন্টের নাম চিহ্নিত করে।data: সেগমেন্টের মান যা শতাংশের মাধ্যমে নির্দেশিত হয়।backgroundColor: প্রতিটি সেগমেন্টের রঙ।
Doughnut Chart (ডোনাট চার্ট)
Doughnut Chart পাই চার্টের একটি বৈচিত্র্য, যেখানে একটি কেন্দ্রে খালি জায়গা থাকে, ফলে এটি ডোনাটের মতো দেখায়। এই চার্টটি সেগমেন্টের মধ্যে তুলনা করতে ব্যবহৃত হয় এবং অতিরিক্ত তথ্য প্রদর্শন করতে কেন্দ্রের খালি জায়গা ব্যবহার করা যেতে পারে।
ব্যবহার:
- বিক্রয় বা অন্যান্য তথ্যের সেগমেন্ট বিশ্লেষণ।
- ডেটার অংশবিশেষ চিত্রিত করা।
কোড উদাহরণ:
const ctx = document.getElementById('myDoughnutChart').getContext('2d');
const myDoughnutChart = new Chart(ctx, {
type: 'doughnut', // Doughnut Chart টাইপ নির্ধারণ
data: {
labels: ['Red', 'Blue', 'Green'], // সেগমেন্টের লেবেল
datasets: [{
data: [20, 50, 30], // সেগমেন্টের মান
backgroundColor: ['red', 'blue', 'green'], // সেগমেন্টের রঙ
borderColor: ['#ffffff', '#ffffff', '#ffffff'], // সেগমেন্টের বর্ডার রঙ
borderWidth: 2 // বর্ডারের প্রস্থ
}]
},
options: {
responsive: true, // রেসপন্সিভ ডিজাইন
plugins: {
legend: {
position: 'top' // লেজেন্ডের অবস্থান
},
tooltip: {
enabled: true // টুলটিপ চালু
}
}
}
});
প্রধান বৈশিষ্ট্য:
type: 'doughnut': ডোনাট চার্টের ধরন।labels: সেগমেন্টের লেবেল।data: সেগমেন্টের মান।backgroundColor: প্রতিটি সেগমেন্টের রঙ।borderColor: বর্ডার রঙ।
Pie এবং Doughnut Chart এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Pie Chart | Doughnut Chart |
|---|---|---|
| কেন্দ্রে খালি জায়গা | নেই | রয়েছে |
| উপস্থাপন | ডেটার ভাগ প্রদর্শন | ডেটার ভাগ এবং অতিরিক্ত তথ্য প্রদর্শন |
| ব্যবহার | সাধারণভাবে শতাংশ দেখানোর জন্য | যখন কেন্দ্রীয় অংশে অতিরিক্ত তথ্য দরকার |
সারাংশ
- Pie Chart এবং Doughnut Chart উভয়ই ডেটার অংশবিশেষ বা শতাংশ দেখানোর জন্য ব্যবহৃত হয়, তবে ডোনাট চার্টের কেন্দ্রে খালি জায়গা থাকে, যা অতিরিক্ত তথ্য প্রদর্শন করতে সহায়তা করে।
- আপনি যদি শুধু ডেটার শতাংশ দেখাতে চান, তবে Pie Chart ব্যবহার করতে পারেন, আর যদি আপনি কেন্দ্রীয় জায়গায় অতিরিক্ত তথ্য চান, তবে Doughnut Chart ব্যবহার করতে পারেন।
- Chart.js সহজেই এই চার্টগুলিকে কাস্টমাইজ এবং ডেটা সেটিংস অ্যাডজাস্ট করার সুযোগ দেয়।
Chart.js এর মধ্যে Pie এবং Doughnut চার্ট দুটি খুবই জনপ্রিয় ভিজ্যুয়ালাইজেশন টুল। যদিও দুটোই অংশবিশেষের ডেটা প্রদর্শন করতে ব্যবহৃত হয়, তবুও তাদের মধ্যে কিছু মৌলিক পার্থক্য রয়েছে। এই দুটি চার্টের ধরন এবং ব্যবহারের মধ্যে পার্থক্য জানলে, আপনি সঠিক পরিস্থিতিতে সঠিক চার্ট নির্বাচন করতে পারবেন।
১. আকৃতি এবং রূপ
- Pie Chart (পাই চার্ট):
- পাই চার্টে একটি পূর্ণ বৃত্ত থাকে যা বিভিন্ন অংশে বিভক্ত করা হয়।
- এতে কোনো খালি কেন্দ্র থাকে না, পুরো বৃত্ত ডেটার অংশ হিসেবে ভাঙা হয়।
- Doughnut Chart (ডোনাট চার্ট):
- ডোনাট চার্টের আকৃতি পাই চার্টের মতো হলেও এর কেন্দ্রে একটি খালি অংশ থাকে (যা ডোনাটের মতো দেখতে), যা ভিজ্যুয়াল পদ্ধতিতে আরও আকর্ষণীয়।
- কেন্দ্রে একটি খালি জায়গা থাকার কারণে, আপনি অতিরিক্ত তথ্য বা কাস্টম লেবেল এখানে দেখাতে পারেন।
২. দৃশ্যমানতা এবং তথ্য উপস্থাপন
- Pie Chart:
- পুরো বৃত্তের অংশ হিসেবে ডেটা উপস্থাপন করা হয়, যেখানে প্রতিটি সেগমেন্টের আকার ডেটার পরিমাণ বা শতাংশের প্রতিনিধিত্ব করে।
- পাই চার্টের ক্ষেত্রে, আপনি শুধুমাত্র ভিন্ন ভিন্ন অংশের তুলনা দেখতে পাবেন।
- Doughnut Chart:
- ডোনাট চার্টের কেন্দ্রে খালি জায়গা থাকার কারণে, এটি কিছুটা ভিন্ন ভিজ্যুয়াল ইফেক্ট প্রদান করে।
- এটি আরো ইনফর্মেশন ধারণ করার জন্য উপযোগী হতে পারে, যেমন কেন্দ্রে অতিরিক্ত টেক্সট বা ডেটা শো করা, যা পাই চার্টে সম্ভব নয়।
৩. কাস্টমাইজেশন এবং বৈশিষ্ট্য
- Pie Chart:
- পাই চার্ট সাধারণত কাস্টমাইজেশন সাপোর্ট করে যেমন রঙ, লেবেল, বর্ডার, আউটলাইন ইত্যাদি। তবে কেন্দ্রে কোনো অতিরিক্ত তথ্য দেখানোর কোনো অপশন নেই।
- Doughnut Chart:
- ডোনাট চার্টে, আপনি কেবল অংশগুলির রঙ এবং আকার কাস্টমাইজ করতে পারেন না, বরং কেন্দ্রে অতিরিক্ত তথ্য, লেবেল বা এমনকি অন্যান্য চার্টও প্রদর্শন করতে পারেন।
৪. ডেটা উপস্থাপন
- Pie Chart:
- পাই চার্ট সাধারণত একক ডেটা সেটের তুলনামূলক অংশ দেখানোর জন্য ব্যবহৃত হয়, যেখানে প্রতিটি সেগমেন্ট একটি নির্দিষ্ট ভ্যালু বা শতাংশের প্রতিনিধিত্ব করে।
- Doughnut Chart:
- ডোনাট চার্টে সেগমেন্টের তুলনা করা হয়, তবে একে একটি শূন্য স্থান থাকতে দেয়। এটি দেখতে বেশি আকর্ষণীয় এবং গ্রাফিক্যালভাবে আধুনিক মনে হয়।
৫. প্রয়োজনীয়তা এবং ব্যবহার ক্ষেত্র
- Pie Chart:
- পাই চার্ট সাধারণত ছোট ডেটা সেটের জন্য উপযুক্ত, যেখানে কিছু ভিন্ন ভিন্ন অংশের মধ্যে তুলনা করা হয়। এটি সাধারণত ব্যবহার হয় যে ডেটাগুলোর মোট পরিমাণকে বিভক্ত করার জন্য।
- Doughnut Chart:
- ডোনাট চার্ট বেশিরভাগ ক্ষেত্রেই বেশি ইনফরমেটিভ হয়ে থাকে, যেখানে আপনি কেন্দ্রে অতিরিক্ত তথ্য দিতে পারেন বা কয়েকটি তথ্য একসাথে প্রদর্শন করতে পারেন। এটি বেশিরভাগ সময় জটিল ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়।
৬. পারফরম্যান্স
- Pie Chart:
- পাই চার্ট সাধারনত কমপার্ট ডেটা সাইজের জন্য ভালো এবং দ্রুত রেন্ডার হয়।
- Doughnut Chart:
- ডোনাট চার্ট, যদিও পাই চার্টের মতো, কিছুটা অতিরিক্ত কম্প্লেক্স এবং অতিরিক্ত ইনফরমেশন প্রদর্শন করার কারণে একটু বেশি রিসোর্স ব্যবহার করতে পারে।
সারাংশ
| বৈশিষ্ট্য | Pie Chart | Doughnut Chart |
|---|---|---|
| আকৃতি | পূর্ণ বৃত্ত | খালি কেন্দ্র সহ বৃত্ত |
| ডেটা উপস্থাপন | বিভিন্ন অংশের মাধ্যমে ডেটা ভাগ করা | খালি কেন্দ্রে অতিরিক্ত তথ্য দেখানো সম্ভব |
| কাস্টমাইজেশন | কাস্টম লেবেল এবং অংশের রঙের পরিবর্তন | কেন্দ্রে অতিরিক্ত লেবেল বা তথ্য প্রদর্শন |
| ব্যবহার | ছোট ডেটাসেটের জন্য উপযুক্ত | বৃহত্তর বা জটিল ডেটা ভিজ্যুয়ালাইজেশন |
| পারফরম্যান্স | দ্রুত এবং সহজ | কিছুটা বেশি রিসোর্স ব্যবহৃত হতে পারে |
উপসংহার
Pie Chart এবং Doughnut Chart উভয়ই ডেটার অংশবিশেষ ভিজ্যুয়ালাইজ করতে ব্যবহৃত হলেও, Doughnut Chart এর কেন্দ্র খালি থাকার কারণে অতিরিক্ত তথ্য বা গ্রাফিকাল উপাদান প্রদর্শনের জন্য বেশি উপযোগী। Pie Chart সাধারণত সিম্পল এবং ছোট ডেটাসেটের জন্য ভালো, যখন Doughnut Chart বেশি ইনফরমেটিভ এবং কাস্টমাইজড বিশ্লেষণের জন্য ব্যবহার করা হয়।
Chart.js-এ slices কাস্টমাইজ করা এবং animation যোগ করা খুবই সহজ এবং আপনি বিভিন্ন ধরনের ডেটা ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করতে পারেন। এই অংশে আমরা দেখব কীভাবে পাই চার্ট (Pie Chart) বা ডোনাট চার্ট (Doughnut Chart) এর slices কাস্টমাইজ এবং animation যুক্ত করা যায়।
স্লাইস কাস্টমাইজ করা (Customizing Slices)
Chart.js-এ স্লাইস কাস্টমাইজ করতে, বিশেষ করে পাই বা ডোনাট চার্টে, আপনি segment বা arc কাস্টমাইজেশন করতে পারেন। স্লাইসের রঙ, সীমানা, আকার, ইত্যাদি পরিবর্তন করা যায়।
উদাহরণ: পাই চার্টে স্লাইস কাস্টমাইজ করা
HTML (canvas)
<canvas id="myPieChart" width="400" height="400"></canvas>
JavaScript (Chart.js কনফিগারেশন)
const ctx = document.getElementById('myPieChart').getContext('2d');
const myPieChart = new Chart(ctx, {
type: 'pie', // পাই চার্ট
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'], // স্লাইসের নাম
datasets: [{
data: [10, 20, 30, 40], // স্লাইসের মান
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'], // স্লাইসের রঙ
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'], // স্লাইসের বর্ডার রঙ
borderWidth: 1 // বর্ডারের প্রস্থ
}]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.label + ': ' + tooltipItem.raw + '%'; // টুলটিপ কাস্টমাইজেশন
}
}
}
}
}
});
backgroundColor: প্রতিটি স্লাইসের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করা যায়।borderColor: স্লাইসের বর্ডার রঙ কাস্টমাইজ করা যায়।borderWidth: স্লাইসের বর্ডারের প্রস্থ কাস্টমাইজ করা যায়।
Animation যোগ করা (Adding Animation)
Chart.js চার্টে অ্যানিমেশন যোগ করা সহজ। আপনি বিভিন্ন ধরনের অ্যানিমেশন ফাংশন ব্যবহার করতে পারেন যেমন ডেটা লোড হওয়া, চার্টে স্লাইস প্রবেশ করা ইত্যাদি।
উদাহরণ: পাই চার্টে অ্যানিমেশন যোগ করা
HTML (canvas)
<canvas id="myAnimatedPieChart" width="400" height="400"></canvas>
JavaScript (Chart.js কনফিগারেশন)
const ctx = document.getElementById('myAnimatedPieChart').getContext('2d');
const myAnimatedPieChart = new Chart(ctx, {
type: 'pie', // পাই চার্ট
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green'],
datasets: [{
data: [10, 20, 30, 40],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'],
borderWidth: 1
}]
},
options: {
responsive: true,
animation: {
animateRotate: true, // স্লাইস রোটেট হবে
animateScale: true, // স্লাইসের আকার পরিবর্তন হবে
duration: 1500, // অ্যানিমেশনের সময়কাল (মিলিসেকেন্ড)
easing: 'easeInOutBounce' // অ্যানিমেশনের ইজিং
},
plugins: {
tooltip: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.label + ': ' + tooltipItem.raw + '%';
}
}
}
}
}
});
animateRotate: স্লাইসের রোটেশন অ্যানিমেশন চালু বা বন্ধ করতে ব্যবহার হয়।animateScale: স্লাইসের আকার পরিবর্তন করার অ্যানিমেশন চালু বা বন্ধ করতে ব্যবহার হয়।duration: অ্যানিমেশনের সময়কাল (মিলিসেকেন্ডে) কাস্টমাইজ করা যায়।easing: অ্যানিমেশনের গতির টাইপ (যেমনeaseInOutBounce,linearইত্যাদি) কাস্টমাইজ করা যায়।
আরও কিছু কাস্টমাইজেশন এবং অ্যানিমেশন অপশন
Legend কাস্টমাইজেশন: Chart.js-এ লেজেন্ড কাস্টমাইজ করা যায়। যেমন, লেজেন্ডের অবস্থান পরিবর্তন করা (উপর, নিচে, ডান বা বাম)।
options: { plugins: { legend: { position: 'top', // লেজেন্ডের অবস্থান labels: { font: { size: 16 // ফন্ট সাইজ কাস্টমাইজ করা } } } } }Tooltips কাস্টমাইজেশন: Tooltips কাস্টমাইজ করার মাধ্যমে, আপনি প্রদর্শিত টুলটিপের তথ্য পরিবর্তন করতে পারেন এবং এটিকে আরও ইন্টারেক্টিভ করতে পারেন।
options: { plugins: { tooltip: { backgroundColor: 'rgba(0, 0, 0, 0.7)', // টুলটিপের ব্যাকগ্রাউন্ড রঙ titleColor: 'white', // টুলটিপের টাইটেল রঙ bodyColor: 'white', // টুলটিপের বডি রঙ displayColors: false // স্লাইসের রঙ দেখানো বন্ধ করা } } }
সারাংশ
Chart.js দিয়ে slices কাস্টমাইজ করা এবং animation যোগ করা বেশ সহজ। আপনি স্লাইসের রঙ, সীমানা, আকার ইত্যাদি কাস্টমাইজ করতে পারেন এবং এছাড়া অ্যানিমেশন দিয়ে চার্টকে আরও ইন্টারেক্টিভ ও আকর্ষণীয় করে তুলতে পারেন। এটি ডেটা ভিজ্যুয়ালাইজেশনকে আরও প্রভাবশালী এবং ব্যবহারকারী-বান্ধব করে তোলে।
